import loginVue from '../login.vue';
<route lang="yaml">
  meta:
    enabled: false
                </route>

<script lang="ts" setup>
import { VXETable } from 'vxe-table'
import type { VxeFormEvents, VxeFormInstance, VxePagerEvents, VxeTableInstance } from 'vxe-table'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import apiPrintTpl from '@/api/modules/print_tpl'

const router = useRouter()
const g = useGlobalProperties()
const refModalForm = ref<VxeFormInstance>()
const pageData = reactive({
  loading: false,
  tableData: [] as any[],
  statusList: [] as any[],
  // 弹窗相关
  modalShow: false,
  modalName: '',
})
const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
})
interface ModalForm {
  id: number
  name: string
  tmpl: string
}
const modalFormData = ref<ModalForm>({
  id: 0,
  name: '',
  tmpl: '',
})
const formRules = {
  name: [
    { required: true, message: '请输入名称' },
  ],
}
interface FormDataVO {
  name: string
}
const formTop = reactive<FormDataVO>({
  name: '',
})
function sumbitModalEvent() {
  refModalForm.value?.validate((valid) => {
    if (!valid) { // 校验通过
      apiPrintTpl.createOrUpdate(modalFormData.value).then(() => {
        pageData.modalShow = false
        tablePage.currentPage = 1
        tablePage.pageSize = 10
        const req = {
          pageIndex: tablePage.currentPage,
          pageSize: tablePage.pageSize,
          name: formTop.name,
        }
        apiPage(req)
      }).catch((e: any) => {
        if (e.msg) {
          ElMessage.error({
            message: e.msg,
            center: true,
          })
        }
      })
    }
  })
}
function cancelModalEvent() {
  pageData.modalShow = false
}
const tableRef = ref<VxeTableInstance>()
/// ///////////////////////////////////右侧按钮相关
function delItem(row: any) {
  VXETable.modal.confirm('确定删除？').then((res) => {
    if (res === 'confirm') {
      apiPrintTpl.del(row.id).then(() => {
        const $table = tableRef.value
        $table?.remove(row)
      })
    }
  })
}
function editItem(row: any) {
  pageData.modalName = '编辑'
  modalFormData.value = row
  pageData.modalShow = true
}
function printDesignItem(row: any) {
  modalFormData.value = row
  router.push({ name: 'print_tmpl', query: { id: row.id, name: row.name, tmpl: row.tmpl } })
}
/// ///////////////////////////////////top按钮相关
function newOrg() {
  pageData.modalName = '新增'
  modalFormData.value = {} as any
  pageData.modalShow = true
}
function removeSelected() {
  const $table = tableRef.value
  if ($table?.getCheckboxRecords().length === 0) {
    ElMessage.error({
      message: '请选中删除行',
      center: true,
    })
    return
  }
  VXETable.modal.confirm('确定删除！！！').then((res) => {
    if (res === 'confirm') {
      const ids = $table?.getCheckboxRecords().map(item => item.id)
      apiPrintTpl.delBatch(ids).then(() => {
        $table?.removeCheckboxRow()
      })
    }
  })
}

/// ///////////////////////////////////api
function apiPage(req: any) {
  pageData.loading = true
  apiPrintTpl.page(req).then((res) => {
    pageData.tableData = res.data.list
    tablePage.total = res.data.total
    pageData.loading = false
  }).catch((err) => {
    ElMessage.error({
      message: JSON.stringify(err),
      center: true,
    })
    pageData.loading = false
  })
}
/// ///////////////////////////////////翻页
const submitTopEvent: VxeFormEvents.Submit = () => {
  tablePage.currentPage = 1
  tablePage.pageSize = 10
  const req = {
    pageIndex: tablePage.currentPage,
    pageSize: tablePage.pageSize,
    name: formTop.name,
  }
  apiPage(req)
}

const resetTopEvent: VxeFormEvents.Reset = () => {
  tablePage.currentPage = 1
  tablePage.pageSize = 10
  const req = {
    pageIndex: tablePage.currentPage,
    pageSize: tablePage.pageSize,
    name: formTop.name,
  }
  // console.log(req)
  apiPage(req)
}
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
  tablePage.currentPage = currentPage
  tablePage.pageSize = pageSize
  const req = {
    pageIndex: tablePage.currentPage,
    pageSize: tablePage.pageSize,
    name: formTop.name,
  }
  apiPage(req)
}
/// ///////////////////////////////////生命周期
onBeforeMount(() => {
  g.getDicts('user_status').then((res: any) => {
    pageData.statusList = res.data.list
  })
})
onMounted(() => {
  // console.log('1231231232323')
  tablePage.currentPage = 1
  tablePage.pageSize = 10
  const req = {
    from: tablePage.currentPage,
    limit: tablePage.pageSize,
    name: formTop.name,
  }
  apiPage(req)
})
</script>

<template>
  <div class="page-wrap">
    <div class="page-top">
      <vxe-form :data="formTop" style="padding-left: 5px;" @submit="submitTopEvent" @reset="resetTopEvent">
        <vxe-form-item title="模板名称" field="name" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.name" placeholder="请输入名称" clearable />
          </template>
        </vxe-form-item>
        <vxe-form-item>
          <template #default>
            <vxe-button type="submit" status="primary" content="搜索" />
            <vxe-button type="reset" content="重置" />
          </template>
        </vxe-form-item>
      </vxe-form>
      <vxe-toolbar>
        <template #buttons>
          <vxe-button style="margin-left: 5px;" @click="newOrg">
            新增
          </vxe-button>
          <vxe-button @click="removeSelected">
            删除选中
          </vxe-button>
        </template>
      </vxe-toolbar>
    </div>
    <page-main>
      <vxe-table
        ref="tableRef" auto-resize stripe border :loading="pageData.loading" :column-config="{ resizable: true }"
        :row-config="{ isHover: true }" :checkbox-config="{ highlight: true, range: true }" :data="pageData.tableData"
        align="center" header-align="center"
      >
        <vxe-column type="checkbox" width="50" />
        <vxe-column field="name" align="center" title="模板名称" />
        <vxe-column field="tmpl" align="center" title="模板内容" />
        <vxe-column title="操作" fixed="right" width="200">
          <template #default="{ row }">
            <vxe-button type="text" @click="delItem(row)">
              删除
            </vxe-button>
            <vxe-button type="text" @click="editItem(row)">
              编辑
            </vxe-button>
            <vxe-button type="text" @click="printDesignItem(row)">
              编辑/设计模板
            </vxe-button>
          </template>
        </vxe-column>
      </vxe-table>
    </page-main>
    <div class="page-opration-container">
      <vxe-pager
        v-model:current-page="tablePage.currentPage" v-model:page-size="tablePage.pageSize"
        :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
        :total="tablePage.total" @page-change="handlePageChange"
      />
    </div>
    <div>
      <vxe-modal v-model="pageData.modalShow" width="800" height="600">
        <template #title>
          <span style="color: red;">{{ pageData.modalName }}</span>
        </template>
        <template #default>
          <div style="display: flex;flex-direction: column;height: 100%;">
            <div style="flex: 1;">
              <vxe-form ref="refModalForm" :data="modalFormData" :rules="formRules" title-width="80">
                <vxe-form-gather span="24">
                  <vxe-form-item title="模板名称" field="name" :item-render="{}" span="12">
                    <template #default="{ data }">
                      <vxe-input v-model="data.name" placeholder="请输入名称" clearable />
                    </template>
                  </vxe-form-item>
                </vxe-form-gather>
              </vxe-form>
            </div>
            <div style="display: flex;justify-content: flex-end;">
              <vxe-button content="取消" @click="cancelModalEvent" />
              <vxe-button status="primary" content="提交" @click="sumbitModalEvent" />
            </div>
          </div>
        </template>
      </vxe-modal>
    </div>
  </div>
</template>

  <style lang="scss" scoped>
  .page-wrap {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .page-top {
      padding-right: 20px;
      padding-left: 20px;
      margin-top: 5px;
    }

    .page-main {
      flex: 1;
      padding-top: 5px;
      margin-top: 5px;
      margin-bottom: 5px;
      overflow: auto;
    }

    .page-opration-container {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 5px;
    }
  }
  </style>
